<template>
  <div style="padding-top: 100px">
    <ElRow type="flex" justify="center">
      <ElCol
        :xs="{ span: 24 }"
        :md="{ span: 18 }"
        style="background-color: #fff"
      >
        <ElRow type="flex" justify="space-between" class="itemRow" :gutter="20">
          <ElCol
            class="item"
            :xs="{ span: 24 }"
            :md="{ span: 12 }"
            v-for="(i, iii) in list"
            :key="iii"
            @click.native="goto(i)"
          >
            <div class="image">
              <el-image :src="i.image">
                <div slot="placeholder" class="image-slot">
                  加载中...<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            <div class="content">
              <h2>{{ i.title }}</h2>
              <p class="describe">{{ i.describe }}</p>
              <p><span>核心技能：</span>{{ i.core }}</p>
              <p>
                <a style="color: #87e3ce" :href="i.href">作品链接</a>
              </p>
            </div>
            <a :href="i.gitHref" v-if="i.gitHref">
              <div class="githubi" v-if="i.gitHref">
                <lottie-animation
                  ref="anim"
                  :animationData="require('@/assets/icon/git.json')"
                  :loop="true"
                  :speed="1"
                  class="github"
                />
              </div>
            </a>
          </ElCol>
        </ElRow>
      </ElCol>
    </ElRow>
    <!-- <loading v-show="isload" /> -->
  </div>
</template>
<script>
import { GET_ARTICLE_LIST } from "@/api/Article";
export default {
  data() {
    return {
      list: [],
      isload: true,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.isload = true;
      GET_ARTICLE_LIST({ tag: "作品", page: 1, limit: 10 }).then((res) => {
        console.log("作品列表=>>", res);
        this.list = res.data;
        setTimeout(() => {
          this.isload = false;
        }, 1000);
      });
    },
    goto(item) {
      localStorage.setItem("item", JSON.stringify(item));
      localStorage.setItem("is", true);
      this.$router.push({ name: "ArticleDetailed" });
    },
  },
};
</script>
<style lang="scss" scoped>
.itemRow {
  flex-wrap: wrap;
}
.item {
  height: 250px;
  background-color: #5c749a;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  //   justify-content: center;
  .image {
    width: 20%;
    padding: 20px;
    .el-image {
      width: 100%;
    }
  }
  .content {
    width: 80%;
    .describe {
      font-size: 15px;
      height: 83px;
      display: -moz-box;
      display: -webkit-box;
      -moz-box-orient: vertical;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      -webkit-line-clamp: 4;
      overflow: hidden;
      font-size: 25rpx;
    }
  }
  .githubi {
    width: 114px;
    height: 90px;
    transform: rotate(45deg);
    position: absolute;
    right: -46px;
    top: -35px;
    background-color: #333;
    border-radius: 50%;
    .github {
      position: absolute;
      width: 30px;
      left: 50%;
      transform: translate(-50%);
      bottom: 5px;
    }
  }
}
</style>